<template>
  <div class="dashboard">
    <v-carousel :show-arrows="false">
      <v-carousel-item
        v-for="(item, i) in items"
        :key="i"
        :src="item.src"
        reverse-transition="fade-transition"
      transition="fade-transition"
      
      >
      </v-carousel-item>
    </v-carousel>
    <v-container class="my-5">
    <h1 class="subheading grey--text my-4 mx-4">Dashboard</h1>

      <v-layout row class="mb-3">
        <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-btn small text color="grey" class="mr-2" @click="sortBy('title')" v-on="on">
                <v-icon left small>folder</v-icon>
                <span class="caption text-lowercase">By Project Name</span>
              </v-btn>
            </template>
           
            <span>Sort by Project Name</span>
        </v-tooltip>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn small text color="grey" @click="sortBy('person')" v-on="on">
              <v-icon left small>person</v-icon>
              <span class="caption text-lowercase">By Person</span>
            </v-btn>
          </template>
          <span>Sort by Person Name</span>
        </v-tooltip>
        
      </v-layout>
      <v-card text class="pa-3 mb-3" v-for="project in projects" :key="project.title">
        <v-layout row wrap :class="`project ${project.status}`">
          <v-flex x12 md6>
            <div class="caption grey--text">Project Title</div>
            <div>{{project.title}}</div>
          </v-flex>
          <v-flex xs6 sm4 md2>
            <div class="caption grey--text">Person</div>
            <div>{{project.person}}</div>
          </v-flex>
          <v-flex xs6 sm4 md2>
            <div class="caption grey--text">Due by</div>
            <div>{{project.due}}</div>
          </v-flex>
          <v-flex xs6 sm4 md2>
            <div class="caption grey--text">Status</div>
            <div>
              <v-chip :class="`status ${project.status}`">
                {{project.status}}
              </v-chip>
            </div>
          </v-flex>
        </v-layout>
      </v-card>
    </v-container>
  </div>
</template>

<script>
// @ is an alias to /src
import db from '@/firebase'

export default {
  name: 'Dashboard',
  data: ()=>({
     items: [
          {
            src: require('../assets/images/slider1.jpeg'),
          },
          {
            src: require('../assets/images/slider2.jpeg'),
          },
          {
            src: require('../assets/images/slider3.jpeg'),
          },
          {
            src: require('../assets/images/slider4.jpeg'),
          },
       ], 

       projects: []
  }),

  methods: {
    sortBy(prop){
      this.projects.sort((a,b)=> a[prop] < b[prop] ? -1 : 1)
    }
  },
  created(){
    db.collection('projects').onSnapshot(res => {
      const changes = res.docChanges();

      changes.forEach(change => {
        if(change.type === 'added'){
          this.projects.push({
            ...change.doc.data(),
            id: change.doc.id
            
          })
        }
      })
    })
  }
}
</script>
<style>
.project.ongoing{
  border-left: 3px solid #0428f6;
  padding-left:10px;
}
.project.complete{
  border-left: 3px solid #05f005;
  padding-left:10px;
}
.project.overdue{
  border-left: 3px solid #fd260a;
  padding-left:10px;
}

.status.ongoing{
  background-color:#413ed6!important;
  color: #ffffffbc;
}
.status.overdue{
  background-color:#db3535!important;
  color: #ffffffbc;
}
.status.complete{
  background-color:#2ed674!important;
  color: #fdfdfdbc;
}
</style>
